<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>各行变色</title>
		<style>
		  	table{
		  		margin:50px auto;
		  		border: 1px solid gainsboro;
		  	}
			tr td{
			 	width: 120px;
			 	/*height: 80px;*/
			 	text-align: center;
			 	line-height: 50px;
			}
			tr:hover{
				background-color: white;
			}
			#tr1{
				background-color: cornflowerblue;
				color: white;
				/*font-weight: bold;*/
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellpadding="0" cellspacing="0">
			<tr id="tr1">
				<td>序号</td>
				<td>姓名</td>
				<td>课程</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>1</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>3</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>4</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>5</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>6</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
		</table>
		<script>
			var bg = document.getElementsByTagName("tr");
			/*bg.onmouseover = function(){
				alert("鼠标滑过");
				bg[i].style.backgroundColor = "whitesmoke";
			}*/
			for(var i=0;i<bg.length;i++){
				if(i%2==0){
					bg[i].style.backgroundColor = "grey";
				}else{
					bg[0].style.backgroundColor = "dodgerblue";
					bg[i].style.backgroundColor = "gainsboro";
				}
			}
		</script>
	</body>
</html>
